<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>3-5 absoult 超越overflow</title>
    <style>
      body {
        background-color: #bbb;
      }
      .scroll {
        width: 500px;
        height: 300px;
        margin: 200px auto 0;
        margin-top: -webkit-calc(50vh - 150px);
        margin-top: calc(50vh - 150px);
        border: 1px solid #ccc;
        border-radius: 3px;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
        background-color: #fff;
        overflow: auto;
      }
      .close {
        position: absolute;
        width: 34px;
        height: 34px;
        margin: -17px 0 0 483px;
        background: url(../images/5444835b000100ce00340075.jpg)
          no-repeat;
      }
      .close:hover {
        background-position: 0 -41px;
      }
      img {
        display: block;
        margin: 10px;
      }
    </style>
  </head>

  <body>
    <div class="scroll">
      <a href="javascript:" class="close" title="关闭"></a>
      <img src="http://img.mukewang.com/54447b06000171a002560191.jpg" />
      <img src="http://img.mukewang.com/54447f550001ccb002560191.jpg" />
    </div>
  </body>
</html>
